<script setup>
//忘记密码登入界面

import {reactive, ref} from "vue";
import {CircleCheck, Lock, Message} from "@element-plus/icons-vue";
import {post} from "@/net/index.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const form = reactive({
  email: '',
  code: '',
  password: '',
  password_repeat: '',
})

const coldTime = ref(0)
// 检验电子邮件是否有效,电子邮箱有效后发送验证码按钮变为可以点击
const isEmailValid = ref(false)
// 拿到整个表单的引用
const formRef = ref()
// 步骤条状态设置
const active = ref(0)

// 校验两次密码是否一致
const validateRepeatPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

// 定义表单校验的规则
const rules = {
  email: [
    {
      required: true,
      message: '请输入邮件地址',
      trigger: ['blur', 'change'],
    },
    {
      type: 'email',
      message: '请输入合法的邮件地址',
      trigger: ['blur', 'change'],
    },
  ],
  code: [
    {required: true, message: '请输入邮箱验证码', trigger: ['blur', 'change']},
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur','change'],
    },
    {min: 8, max: 16, message: '密码长度必须在8到16位之间', trigger: ['blur','change']},
  ],
  password_repeat: [
    { validateRepeatPassword, trigger: ['blur','change']},
  ]
}

// 邮箱校验通过,就设置获取验证码按钮为可见
const onValidate = (prop, isValid) => {
  if (prop === 'email')
    isEmailValid.value = isValid
}

//获取验证码的方法,参数传递表单中的数据,将这个函数绑定给点击获取验证码事件,调用的是更新密码获取验证码的方法
const validateResetEmail = () => {
  /**
   * 发送验证码之后冷却时间定为60秒
   * 设置定时器每秒钟减少一次
   * 点完之后就进入计时器,不然这个等待过程可以一直点击获取验证码
   */
  coldTime.value = 60
  post("/api/auth/validateResetEmail", {
    email: form.email,
  }, (message) => {
    ElMessage.warning(message)
    setInterval(() =>
        coldTime.value--, 1000
    )
  },()=>{
    ElMessage.warning('发送验证码失败')
    // 当验证码失败之后立马将时间设置为0
    coldTime.value = 0
  })
}


// 更新密码之前先校验验证码,后端会向session中放入一个值
const startReset = () => {
  // 进行校验,第一个参数是是否通过
  formRef.value.validate((isValid)=>{
    if (isValid){
      post("/api/auth/startResetPwd",{
        email: form.email,
        code: form.code
      },(message)=>{
        //成功之后执行第二步骤
        active.value++
      })
    }else {
      ElMessage.warning('请完整填写表单')
    }
  })
}


// 真正的重置密码操作
const resetPassWord = () => {
  // 进行校验,第一个参数是是否通过
  formRef.value.validate((isValid)=>{
    if (isValid){
      post("/api/auth/resetPassWord",{
        password: form.password
      },(message)=>{
        //成功之后跳转到登入页面进行登入
        // active.value++
        ElMessage.success(message)
        router.push("/")
      })
    }else {
      ElMessage.warning('请完整填写表单')
    }
  })
}


</script>

<template>
  <div>
    <!--  重置密码有步骤操作,这块引入步骤条  -->
    <div style="margin: 30px 20px;">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="验证电子邮件"/>
        <el-step title="重新设定密码"/>
      </el-steps>
    </div>

    <transition name="el-fade-in-linear" mode="out-in">
      <div style="text-align: center;margin: 20px;height: 100%"  v-if="active === 0">
        <!--   定义了一个active,这个是用来控制步骤条的,邮箱校验的时候第一步是active === 0 验证邮箱阶段     -->
        <div style="text-align: center;margin-top: 100px">
          <!--   提示部分       -->
          <div style="font-size: 25px;font-weight: bold">重置密码</div>
          <div style="font-size: 10px;color: gray">请输入需要重置密码的电子邮件地址</div>
          <div style="margin-top: 50px">
            <!--   使用el表单,绑定我们的表单,设置表单回调成功事件onValidate, 设置整个表单的引用   -->
            <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">

              <el-form-item prop="email">
                <el-input v-model="form.email" type="email" placeholder="请输入邮箱">
                  <template #prefix>
                    <el-icon>
                      <Message/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item prop="code">
                <!--   gutter是下面row之间的间隔     -->
                <el-row gutter="10" style="width: 80%">
                  <el-col :span="17">
                    <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
                      <template #prefix>
                        <el-icon>
                          <CircleCheck/>
                        </el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="5">
                    <!--    先置灰按钮如果没有点击输入邮箱isEmailValid或者冷却时间大于0   -->
                    <!--                <el-button  @click="validateEmail" type="success"
                                                :disabled="!isEmailValid || coldTime > 0 ">获取邮箱验证码</el-button>-->
                    <el-button @click="validateResetEmail" type="success"
                               :disabled="!isEmailValid || coldTime > 0 ">
                      {{
                        coldTime > 0 ? '请稍后' + coldTime + '秒' : '获取验证码'
                      }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button @click="startReset" style="width: 300px;" type="danger" plain>开始重置密码</el-button>
          </div>
        </div>
      </div>
    </transition>

    <transition name="el-fade-in-linear" mode="out-in">
      <div style="text-align: center;margin: 20px;height: 100%"  v-if="active === 1">
        <div style="text-align: center;margin-top: 100px">
          <!--   提示部分       -->
          <div style="font-size: 25px;font-weight: bold">确认密码</div>
          <div style="font-size: 10px;color: gray">请确认两次输入的密码保持一致</div>
          <div style="margin-top: 50px">
            <!--   使用el表单,绑定我们的表单,设置表单回调成功事件onValidate, 设置整个表单的引用   -->
            <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
              <el-form-item prop="password">
                <!--    限定密码长度最大为十六位        -->
                <el-input v-model="form.password" :maxlength="16" type="text" placeholder="新密码">
                  <template #prefix>
                    <el-icon>
                      <Lock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password_repeat">
                <el-input v-model="form.password_repeat" :maxlength="16" type="text" placeholder="确认新密码">
                  <template #prefix>
                    <el-icon>
                      <Lock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button @click="resetPassWord" style="width: 300px;" type="danger" plain>立即重置</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>


</template>

<style scoped>

</style>